// *******************************************************************************************************
// # フォーム要素
// *******************************************************************************************************

// フォーム要素
//
// #### export to common.css
// ※このページでは表示が完全に再現されず、部分的に崩れている場合があります。  
// ※class名やデザインの参考まで
//
// Styleguide 5.0


// セレクトボックス：可変
//
// デフォルトで全てのセレクトボックスに適用（JS）
//
// select - sample
//
// Markup:
// <select name="" id="">
// <option value="0" selected="">下限なし</option>
// <option value="20000">2万円</option>
// </select>
//
// Styleguide 5.1

/* --------------------------
	* custom_select
* -------------------------- */
.custom_select {
	@extend %btnTextLine;
	@extend .mod_btn_blue;
	color: $textColor !important;
	font-weight: normal;
	text-align: left !important;

	&:after {
		margin-top: -4px;
		border: 7px solid transparent;
		border-top-color: $borderColorBlue;
		position: absolute;
		right: 18px;
		top: 50%;
		width: 0;
		height: 0;
		content: "";
	}
}

.custom_selectInner {
	width: 100% !important;
}


// セレクトボックス：幅指定
//
// 親要素で幅を指定
//
// .mod_select_content - sample
//
// Markup:
// <span class="mod_select_content">
// <select name="" id="">
// <option value="0" selected="">下限なし</option>
// <option value="20000">2万円</option>
// </select>
// </span>
//
// Styleguide 5.1

/* --------------------------
	* mod_select_content
* -------------------------- */
.mod_select_content {
	@include inline-block;
	width: 200px;

	@include hack(6) {
		width: auto;
	}
	@include hack(7) {
		width: auto;
	}
}


// チェックボックスとラジオボタン
//
// デフォルトで全てのチェックボックスとラジオボタンに適用（JS）
//
// 親要素に`.mod_check`を付与することで、チェック時に親要素の背景色がピンクになるようにjsが組み込まれています。  
// ※/shared/js/function_form.js  
// 親要素のチェック前の背景色やサイズは随時調整
//
// checkbox, radio - sample
//
// Markup:
// <span class="mod_check" style="display: block;"><input type="checkbox" name="" id="" value="" /></span>
// <input type="radio" name="" id="" value="" />
//
// Styleguide 5.2

// チェックボックス：選択
//
// 「選択」チェックボックスは緑
//
// .mod_check.mod_check_green - sample
//
// Markup:
// <span class="mod_check mod_check_green"><input type="checkbox" name="" id="" value="" /></span>
//
// Styleguide 5.3

/* --------------------------
	* mod_checkbox, mod_radio
* -------------------------- */
.mod_checkbox, .mod_radio {
	margin-right: 10px;
	@include inline-block;
	@extend %spriteInput;
	top: -2px;
	cursor: pointer;
}

.mod_checkbox {
	@include spriteInputBackground(s1_check_blue);

	&.checked {
		background-position: 0px -26px * 1;
	}
	&.disabled {
		cursor: default;
	}
}

.mod_radio {
	@include spriteInputBackground(s5_check_radio_blue);

	&.checked {
		background-position: 0px -26px * 5;
	}
	&.disabled {
		cursor: default;
	}
}

.mod_check_green {
	.mod_checkbox {
		margin-right: 0;
		@include spriteInputBackground(s3_check_green);
		background-position: 0px -26px * 2;

		&.checked {
			background-position: 0px -26px * 3;
		}
	}
}

.mod_checked {
	background-color: $bgColorPinkChecked !important;
}

